<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">

<title>用户登录页面</title>
</head>
<style>
	.outBorder{
		width: 450px;
		background-color: ghostwhite;
		margin-left: 30%;
		margin-top: 100px;
	}
	form{
		margin-left: 20%;
		font-size: 20px;
	}
	.inputBorder{
	}
	.submitBorder{
		margin-left: 20%;
		margin-top: 20px;
		padding-bottom: 20px;
	}
	
</style>

<body>
	<div id="app">
	{{message}}
</div>
<!-- 外边框 -->
<div class = "outBorder">
	<form action="#" method="post" enctype="multipart/form-data">
		<!-- 输入框 -->
		<div class = "inputBorder">
			<table>
				<tr>
					<th class="text-center" style="font-size: 25px; color: "dodgerblue" colspan="2" >
						用户登录页面
					</th>
				</tr>
				<tr>
					<td>用户名</td>
					<td><input type = "text" name = "username" placeholder = "请输入用户名"/></td>
				</tr>
				<tr>
					<td>密码</td>
					<td><input type = "password" name = "userpass" placeholder = "请输入密码"/></td>
				</tr>
				<tr>
					<td>确认密码</td>
					<td><input type = "password" name = "surepass" placeholder = "请确认密码"/></td>
				</tr>
				<tr>
					<td>出生日期</td>
					<td><input type = "date" name = "born" placeholder = "请输入出生日期"/></td>
				</tr>
				<tr>
					<td>真实姓名</td>
					<td><input type = "text" name = "realname" placeholder = "请输入真实姓名"/></td>
				</tr>
				<tr>
					<td>性别</td>
					<td><input type = "radio" name = "gender" />男<input type = "radio" name = "gender" />女</td>
				</tr>
				<tr>
					<td>邮箱</td>
					<td><input type = "email" name = "email" placeholder = "请输入邮箱"/></td>
				</tr>
				<tr>
					<td>电话</td>
					<td><input type = "tel" name = "phone" placeholder = "请输入电话"/></td>
				</tr>
				<tr>
					<td>qq</td>
					<td><input type = "text" name = "qq" placeholder = "请输入QQ"/></td>
				</tr>
				<tr>
					<td>爱好</td>
					<td><input type = "checkbox" name = "hobby" />篮球<input type = "checkbox" name = "hobby" />排球<br><input type = "checkbox" name = "hobby" />羽毛球<input type = "checkbox" name = "hobby" />足球<br><input type = "checkbox" name = "hobby" />乒乓球<input type = "checkbox" name = "hobby" />网球</td>
				</tr>
				<tr>
					<td>头像</td>
					<td><input type = "file" name = "headerImg"/></td>
				</tr>
			</table>
		</div>
		<!-- 提交框 -->
		<div class="submitBorder">
			<button type="submit" class="btn btn-default" style="font-size:20px;font-family:'微软雅黑';background-color: cornflowerblue;color: #ffdddb;">注册</button>
			<button type="reset" class="btn btn-default" style="font-size:20px;font-family:'微软雅黑';margin-left: 30px;background-color: cornflowerblue;color: #ffdddb;">重置</button>
		</div>
	
	</form>
	
</div>

<script src="./js/jquery.slim.min.js"></script>
<script src="./js/popper.min.js"></script>
<script src="./js/bootstrap.min.js"></script>
<script src="./layer/layer.js"></script>
<script src="./js/sweetalert2.all.min.js"></script>
<script src="./js/axios.min.js"></script>
<script src="./js/vue.min.js"></script>
<script src="./js/request.js"></script>
<script type="text/javascript">

</script>
</body>
</html>